<template>
  <u-popup mode="bottom" length="80%" border-radius="20" :mask-close-able="false" @close="handlePopupClose"
    v-model="showIndustry">
    <view class="u-p-30">
      <view >
        <u-search :show-action="false" @change="handleSearch" height="80" shape="square" placeholder="搜索行业名称"
          v-model="keyword">
        </u-search>
        <view v-if="industryList && industryList.length > 0" class="industry_search">
          <view v-for="(inItem, inInd) in industryList" :key="inInd" @click="handleCheckSearch(inItem)"
            class="industry_search_item">
            <rich-text :nodes="inItem.industry_red_name"></rich-text>
          </view>
        </view>
      </view>

    </view>
    <view class="sidebar">
      <div style="height: 100%;">
        <view class="s-flex u-col-top" style="height: 100%;">
          <view class="van-sidebar">
            <view v-for="(items, index) in classAIndustryList" :key="index" @click="handleCheck(items)"
              :class="[checkClassAId == items.industry_id ? 'industry_tab' : 'industry_untab']"
              class="industry_tab_default u-font-24 u-flex">{{ items.industry_name }}</view>
          </view>
          <view class="u-flex-col sidebar_content">
            <scroll-view scroll-y="true" style="height: 100%;" @scrolltolower="handleScrollToLower">
              <view v-for="(items, index) in classBIndustryList" :key="index">
                <view class="u-m-l-20 width96 sidebar_content_item" v-if="items.industry_children.length > 0">
                  <view class="u-m-t-20 u-m-b-10">
                    <text class="u-color-puce u-font-30">|</text>
                    <text class="u-m-l-10">{{ items.industry_name }}</text>
                  </view>
                  <view class="s-flex u-flex-wrap u-m-l-40 u-m-r-40 u-m-b-30">
                    <view v-for="(cItem, cindex) in items.industry_children" :key="cindex"
                      @click="handleCheckClassB(cItem, items.industry_name)" class="u-m-t-40">
                      <text :class="[checkClassBId == cItem.industry_id ? 'demand_list_tags' : 'demand_list_tags_f']">{{
                        cItem.industry_name }}</text>
                    </view>
                  </view>
                </view>
              </view>
              <view class="u-flex u-flex-wrap" :style="{'flex-direction': column ? 'column' : 'initial'}">
                <view v-for="(items, index) in classBIndustryList" :key="index"
                  class="u-m-t-20 u-m-b-10 s_flex u-row-between u-m-r-30">
                  <view v-if="items.industry_children.length < 1">
                    <view @click="handleCheckClassB(items, items.industry_name)" class="u-m-t-40">
                      <text :class="[checkClassBId == items.industry_id ? 'demand_list_tags' : 'demand_list_tags_f']">{{
                        items.industry_name }}</text>

                    </view>
                  </view>
                </view>
              </view>
            </scroll-view>
          </view>
        </view>

      </div>
    </view>
    <view class="u-flex u-m-t-15 u-width-100 sidebar_save">
      <u-button @click="handleOperate(0)" :custom-style="endDemandBtn" size="medium" class="sidebar_save_btn">取消
      </u-button>
      <u-button @click="handleOperate(1)" :custom-style="editDemandBtn" class="sidebar_save_btn" size="medium"
        type="primary">保存
      </u-button>
    </view>
  </u-popup>
</template>

<script>
import {
  getClassBIndustry,
  getSearchIndustry
} from "@/network/api.js"
export default {
  // props: ['showIndustry', "classAIndustryList", "classBIndustryList", "classAIndustryObj", "column"],
  props: {
    showIndustry: {
      type: Boolean,
      default: false
    },
    classAIndustryList: {
      type: Array,
      default: () => []
    },
    classBIndustryList: {
      type: Array,
      default: () => []
    },
    classAIndustryObj: {
      type: Object,
      default: () => {}
    },
    column: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      checkClassAId: "",
      checkClassBId: "",
      endDemandBtn: {
        background: "#999999FF",
        border: "none",
        color: "#fff",
        width: "100%",
        height: "80rpx"
      },
      editDemandBtn: {
        width: "100%",
        height: "80rpx",
        background: "#fb6316"
      },
      industryAText: "",
      industryBText: "",
      keyword: "",
      industryList: []
    }
  },
  watch: {
    classAIndustryObj: {
      deep: true,
      handler(val) {
        this.checkClassAId = val.industry_id
        this.industryAText = val.industry_name
        this.checkClassBId = val.industryC_id
      }
    }
  },
  methods: {
    handleScrollToLower() {
      if(column){
        console.log('滚到底')
      }
    },
    handleCheck(item) {
      this.checkClassAId = item.industry_id
      this.industryAText = item.industry_name
      this.$emit("checkA", item.industry_id)
    },
    handleCheckSearch(inItem) {
      const industryNames = inItem.industry_name.split("/")
      this.industryAText = industryNames[0]
      this.industryBText = industryNames[1]
      this.checkClassAId = inItem.first_id
      this.checkClassBId = inItem.industry_id
      this.industryList = []
      this.keyword = ""
      this.$emit("closes", {
        id: inItem.industry_id,
        firstIndustryId: inItem.first_id,
        name: inItem.industry_name
      })
    },
    handleCheckClassB(item, bName) {
      if (bName == item.industry_name) {
        this.industryBText = bName
      } else {
        this.industryBText = `${bName}/${item.industry_name}`
      }
      this.checkClassBId = item.industry_id
    },
    handleSearch() {
      getSearchIndustry({
        keyword: this.keyword
      }).then(res => {
        this.industryList = res.data
      })
    },
    handlePopupClose() {
      const industryName = `${this.industryAText}/${this.industryBText}`
      if (this.checkClassBId) {
        this.$emit("closes", {
          id: this.checkClassBId,
          firstIndustryId: this.checkClassAId,
          name: industryName
        })
      } else {
        this.$emit("closes", '')
      }
    },
    handleOperate(type) {
      if (type == 0) {
        this.$emit("closes", '')
      } else {
        const industryName = `${this.industryAText}/${this.industryBText}`
        this.$emit("closes", {
          id: this.checkClassBId,
          name: industryName
        })
      }
    }
  }
}
</script>

<style lang="scss">
.industry_tab_default {
  width: 160rpx;
  height: 150rpx;
  padding: 16rpx;
}

.industry_untab {
  background-color: #f7f8fa;
}

.industry_tab {
  background-color: #fff;
  border-left: solid 2px #fb6316;
}

.industry_r_tab {
  width: 50%;
}

.sidebar {
  height: 79%;

  .van-sidebar {
    height: 100%;
    background-color: #f7f8fa;
  }

  .sidebar_content {
    height: 100%;
    overflow: auto;
    flex: 1;

    //最后一个子元素
    .sidebar_content_item:last-child {
      margin-bottom: 20px;
    }
  }
}

.sidebar_save {
  justify-content: space-around;

  .sidebar_save_btn {
    width: 43vw;
  }
}

.industry_search {
  width: 86%;
  position: absolute;
  background-color: #fff;
  z-index: 999;
  padding: 0 10px;
  height: 215px;
  overflow-y: scroll;

  .industry_search_item {
    font-size: 16px;
    padding: 5px 0;
  }
}

.demand_list_tags {
  border: solid 1px #fb6316;
  color: #fb6316;
  padding: 0 8px;
  border-radius: 3px;
}

.demand_list_tags_f {
  padding: 0 8px;
  border-radius: 3px;
}
</style>
